import React, {Component} from 'react';
import TheLineChart from "../../../../components/TheLineChart";
import TheBarChart from "../../../../components/TheBarChart";
import ThePieChart from "../../../../components/ThePieChart";
import ChartContent from "./chartContent";
import {Empty} from 'antd'

class PlusChartLine extends Component {
    state = {
        dataSource: null
    }

    async componentDidMount() {
        await this.getData()
    }

    async componentDidUpdate(prevProps, prevState, snapshot) {
        const preDateType = prevProps.dateType;
        const {dateType} = this.props;
        if (preDateType !== dateType) {
            await this.getData()
        }
    }

    getData = async () => {
        const {url, dateType} = this.props
        this.setState({
            dataSource: null
        })
        const response = await React.$get(url + `?dateType=${dateType}`)
        if (response.code === 0) {
            const dataSource = response.data
            this.setState({
                dataSource
            })
        }
    }

    handleCancel = () => {
        this.setState({
            visible: false
        })
    }
    openDialog = () => {
        this.setState({
            visible: true
        })
    }
    onFinish = value => {
        console.log(value)
    }

    render() {
        const {dataSource} = this.state
        const {grid} = this.props
        return <>
            {
                dataSource &&
                <div style={{gridTemplateColumns: `repeat(${grid},${(grid > 1 ? 99 : 100) / grid}%)`}}
                     className={'grid-chart'}>
                    {
                        dataSource.map(v => {
                            return <div className={'plus-chart-line'}>
                                <ChartContent updateClick={this.openDialog} dataSource={v.data[0]}/>
                                <div style={{
                                    height: 300,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    {
                                        v.type === 'chartLine' && v.data[0].lineXData && v.data[0].lineXData.length > 0 ?
                                            <TheLineChart name={v.data[0].chartTitle} lineXData={v.data[0].lineXData}
                                                          lineYData={v.data[0].lineYData}/> :
                                            v.type === 'chartLine' &&
                                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                                    }

                                    {
                                        v.type === 'chartBar' && v.data[0].lineXData && v.data[0].lineXData.length > 0 ?
                                            <TheBarChart name={v.data[0].chartTitle} xData={v.data[0].lineXData}
                                                         yData1={v.data[0].lineYData}/> :
                                            v.type === 'chartBar' &&
                                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                                    }

                                    {
                                        v.type === 'chartPie' && v.data[0].otherValue && v.data[0].otherValue.length > 0 ?
                                            <ThePieChart chartTitle={v.data[0].chartTitle}
                                                         dataValue={v.data[0].otherValue}/> :
                                            v.type === 'chartPie' &&
                                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                                    }
                                </div>
                            </div>
                        })
                    }
                </div>
            }
        </>
    }
}

export default PlusChartLine;